<!-- 父子组件传参 -->
<template>
  <div class="page3">
    <el-card>
      <Son @search="search"></Son>
      <Table :tableData="tableData" 
              @handleSelectionChange="handleSelectionChange"
              :TabelColumn="TabelColumn"
              @switchChang="switchChang"
              @rowoperation='rowoperation'
      class="table"></Table>
    </el-card>
    <p>{{ searchVal }}</p>
  </div>
</template>
<script>
import Son from "@/components/son.vue";
import Table from "@/components/table.vue";
export default {
  components: { Son,Table },
  data: function () {
    return {
        searchVal:'',
        multipleSelection:[],
        tableData:[
            {
                name:'name1',
                data:'2022-9-8',
                address:'南昌',
                img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665218215&t=e6af92bb98e2a67a4a1703fa14f94d1d',
                state:false
            
            },
            {
                name:'name2',
                data:'2022-9-8',
                address:'南昌',
                img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21031FKU44S6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665219253&t=dad1e1a86f6689ac3ff86476ad2e20c3',
                state:false
            },
            {
                name:'name3',
                data:'2022-9-8',
                img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665219253&t=2228059846ba79b2e971dc6874370ed4',
                address:'南昌',
                state:false
            },
           
        ],
        TabelColumn:[{
          type:'text',
          prop:'name',
          label:'名称'

        },
        {
          type:'img',
          prop:'img',
          label:'头像'

        },
        {
          type:'switch',
          prop:'state',
          label:'状态'

        },
       
        {
            lable:'操作',
            type:'opt',
            size:'mini',
            operations:[{
                label:'查看',
                method:'check',
                type:'primary'
            },
            {
                label:'编辑',
                method:'del',
                type:'warning'
            },
          
            {
                label:'删除',
                method:'del',
                type:'danger'
            },
            ]
            },
                ]
                };
            },
  methods: {
    search(val) {
      console.log("父组件", val);
      this.searchVal = val;
    },
    handleSelectionChange(val){
      this.multipleSelection = val
      console.log('父组件',this.multipleSelection)
    },
    switchChang(val){
     console.log(val)
     val.state = !val.state
     console.log('点击后state',val.state)
    },
    // 操作按钮
  async  rowoperation(row,method){
      console.log('父组件',row,method)
      if(method==='check'){
        console.log('check')
        //   const res = await UserMsg(row.id)
        // console.log('获取员工信息',res.data.data)
        //  this.UserMsg = res.data.data 
        // this.$store.dispatch('getUserMsg',row.id)
        // const res = await UserMsg(row.id)
        // console.log(res.data.data)
        //  this.UserMsg = res.data.data 
        //  
        // this.getMsg()
        // this.$router.push({path:'/user/detail', query:{id:row.id}})
      }
      // 角色
    //   this.EditId = row.id
    //    if(method==='role'){
    //     console.log('role')
    //      this.getRole()
         
       
        // const res = await roleDetail(row.id)
        // console.log('roleDetail',row.id,res)
        // const {data:res} = await UserMsg(row.id)
        // console.log('获取员工信息',res.data)
        //  this.UserMsg = res.data
        //  this.roleIds = res.data.roleIds
        //  const arr =[]
        //  res.data.roleIds.forEach(item => {
        //   console.log('item',item)
        //   arr.push(item)

        //  });
    //      console.log(arr)
    //        this.roleIds = arr
    //        this.RoledialogVisible = true
    //     //  console.log('this.roleIds', this.roleIds)
        
    //    }
       if(method==='del'){
        console.log('del')
    //    const confirmRes = await this.$confirm(
    //     "此操作将永久删除该商品, 是否继续?",
    //     "提示",
    //     {
    //       confirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //       type: "warning",
    //     }
    //   ).catch((err) => err);
    //   if (confirmRes !== "confirm") {
    //     return this.$message.info("已取消删除");
    //   }

    //   const res =  await DelUser(row.id)
    //   console.log('DelUser',res);
    //   if (res.data.code!=10000) {
    //     return this.$message.error("删除失败");
    //   }
    //   this.$message.success("删除成功");
    //    this.getUser()
       }

    },
},
};
</script>
    <style scoped>
.el-card {
  padding: 10px 10px;
}
.table{
    margin-top: 20px;
}
</style>